<template>
  <Header></Header>
  <div class="filter">
    <div class="filter-main">
      <div class="filter-main-title">
        <img
          style="margin-right: 8px"
          src="@/assets/img/title/course-title2.png"
          alt=""
          height="46px"
        />
        <div class="courseIndexBanner" style="display: block">
          <img
            src="@/assets/img/title/course-top.png"
            style="cursor: default"
            height="12px"
          />
        </div>
      </div>

      <div class="filter-main-item">
        <div class="item-title">方向：</div>
        <ul>
          <li class="all">全部</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
        </ul>
      </div>
      <div class="filter-main-item">
        <div class="item-title">分类：</div>
        <ul>
          <li class="all">全部</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
          <li>前端开发</li>
        </ul>
      </div>
      <div class="filter-main-item">
        <div class="item-title">难度：</div>
        <ul>
          <li class="all">全部</li>
          <li>零基础</li>
          <li>初阶</li>
          <li>中阶</li>
          <li>高阶</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="list">
    <div class="list-main">
      <div class="list-t">
        <ul>
          <li>综合</li>
          <li>|</li>
          <li>最新课程</li>
          <li>|</li>
          <li>最多购买</li>
          <li>|</li>
          <li>价格</li>
          <li class="list-t-price">
            <span></span>
            <div class="caret">
              <el-icon class="icon1"><CaretTop /></el-icon>
              <el-icon class="icon2"><CaretBottom /></el-icon>
            </div>
          </li>
        </ul>
        <div>
          <el-checkbox label="免费课程" size="large" />
          <el-checkbox label="会员免费课程" size="large" />
        </div>
      </div>
      <ul class="list-c">
        <li class="course-box">
          <img src="@/assets/img/course/4.jpg" alt="" />
          <div class="course-info">
            <p class="title ellipsis2">
              计算机视觉--YOLO+Transfomer多场景目标检测实战
            </p>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/2.jpg" alt="" />
          <div class="course-info">
            <h3>计算机视觉--YOLO+Transfomer多场景目标检测实战</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/6.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/5.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/5.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
      </ul>
      <div class="list-b">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup lang="ts">
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
//引入el-icon
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'

import { useRoute } from 'vue-router'

let route = useRoute()

console.log(route.query.id, 'route.params')
</script>

<style scoped lang="less">
.filter {
  width: 100%;
  height: 297px;
  background-color: #f3f5f9;
  // display: flex;
  // justify-content: center;
  .filter-main {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    flex-direction: column;

    padding-top: 15px;
    height: 197px;
    .filter-main-title {
      display: flex;
      padding: 15px 0 10px 0px;
      .courseIndexBanner {
        max-width: 240px;
        min-width: 60px;
        height: 46px;
        line-height: 46px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: 899;
        display: none;
        img {
          vertical-align: text-bottom;
        }
      }
    }
    .filter-main-item {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .item-title {
        line-height: 25px;
      }
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          margin-right: 30px;
          font-size: 14px;
          font-weight: 400;
          line-height: 25px;

          color: #515759;
        }
        li.all {
          color: #388fff;
          text-decoration: none;
          background: rgba(44, 128, 255, 0.1);
          border-radius: 5px;
          font-size: 14px;
          line-height: 25px;
          height: 25px;
          padding: 2px 10px;
          margin-left: 9px;
          text-align: center;
        }
      }
    }
  }
}
.list {
  padding: 13px 0;
  background-color: #fff;
  width: 100%;

  .list-main {
    width: 1200px;
    margin: 0 auto;
  }
  .list-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        margin-right: 15px;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #515759;
      }
      li.list-t-price {
        display: flex;
        .caret {
          display: flex;
          position: relative;
          left: -12px;
          flex-direction: column;
          .icon1 {
            position: relative;
            top: 3px;
          }
          .icon2 {
            position: relative;
            bottom: 3px;
          }
        }
      }
    }
  }
  .list-c {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    .course-box {
      position: relative;
      width: 270px;
      height: 272px;
      margin-bottom: 24px;
      background: #ffffff;
      box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
      border-radius: 8px;
      transition: all 0.2s;
      img {
        width: 270px;
        height: 152px;
        border-radius: 8px 8px 0 0;
        position: relative;
        overflow: hidden;
      }
      .course-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // color: #545c63;
        padding: 10px 10px;
        height: 104px;

        h3 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .middle {
          display: block;
          color: #9199a1;
          font-size: 13px;
          margin-top: 8px;
        }
        .price {
          display: flex;
          padding: 8px 0;
          .price-vip {
            text-align: center;
            width: 64px;
            height: 20px;
            background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
            color: #fff;
            border-radius: 16px 0px 16px 0px;
          }
          .price-red {
            font-size: 12px;
            margin-left: 8px;
            color: #f01414;
            font-weight: 700 !important;
          }
        }
      }
    }
  }
  .list-b {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
